<template>
  <CommonPage title="标准API">
    <!-- <template #mid>
      <SearchForm>
        <template #extraButtons>
          <a-button type="primary" @click="showCreate">新增系统参数</a-button>
        </template>
      </SearchForm>
    </template> -->
    <SlTable :columns="columns" row-key="id" :data-source="tableData" :pagination="pagination" :loading="tableLoading">
      <template #bodyCell="{ column, record }">
        <div v-if="column.dataIndex === 'state'">
          <a-switch :checked="record.state"></a-switch>
        </div>
      </template>
    </SlTable>
    <!-- <CURDDialog
      ref="CURDModalIns"
      id-key="id"
      :columns="columns"
      create-title="新增菜单"
      update-title="编辑菜单"
      delete-message="确认删除该菜单吗？"
      :show-options="showOptions"
      :model="model"
      :model-form-setting="modelFormSetting"
      :model-rules="modelRules"
      :table-data="tableData"
      :oper-data="operData"
      :curd="curd"
      :reload-table="reloadTable"
      :delete-url-suffix-mode="1"
      @before-ok="beforeOk"
      @open="open"
    /> -->
  </CommonPage>
</template>
<script lang="ts" setup>
import { ref, shallowRef } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { FormItemComponentType, CURDAction, CURDDialogExpose } from "/@/components/CURDDialog/models";
import type { FormItemData, OperItem, ShowCURDModalOptions, CURDModalEvent } from "/@/components/CURDDialog/models";
import type { TableProps } from "ant-design-vue";
import { PatternKey } from "/@/utils/verify";
import { Api } from "/@/api/home/menu";
import { MenuItem, MenuType } from "/@/api/home/menu/models";
import { handleMenuSort } from "/@/stores/menu";
import { loopItem } from "/@/utils/treeData";
import dayjs from "dayjs";

const { t } = useI18n();
const columns = ref<TableProps<Partial<MenuItem>>["columns"]>([
  {
    title: "ID",
    dataIndex: "id",
  },
  {
    title: "API",
    dataIndex: "api",
  },
  {
    title: "状态",
    dataIndex: "state",
  },
  {
    title: "调用日志",
    dataIndex: "log",
  },
  {
    title: "描述",
    dataIndex: "des",
  },
]);
// const model = ref<Partial<MenuItem>>({
//   menuName: "",
//   icon: "",
//   path: "",
//   menuType: MenuType.FUNCTION,
//   orderNum: 999,
// });
// const modelRules = ["menuName", "path", "menuType", "orderNum"];
// const modelFormSetting: FormItemData<Partial<MenuItem>>[] = [
//   {
//     key: "menuName",
//     max: 32,
//     pattern: PatternKey.code,
//   },
//   {
//     key: "orderNum",
//     label: "显示排序",
//     type: FormItemComponentType.NUMBER,
//     props: {
//       min: 0,
//       max: 999,
//     },
//   },
// ];

const { pagination, tableData, tableLoading, curd, reloadTable } = useCURD<any>({
  // getDataUrl: Api.sysMenuRoutes,
  // createUrl: Api.sysMenu,
  // updateUrl: Api.sysMenu,
  // deleteUrl: Api.sysMenu,
  mockData: [{ id: "GUID", api: "会员信息", state: true, log: "日志", des: "成功" }],
});

function showCreate() {}

function showUpdateModal(record) {}

function handleDelete(record) {}
</script>
